<template>
  <view id="after">
      <view class="after">
          <view class="after-content" v-for="(item, index) in after" :key="index" @click="click(item.url)">
              <view class="bag">
                  <view class="after1">
                      <view class="after1-top">
                          <view>{{ item.title }}</view>
                      </view>
                      <view class="after1-top1">
                          <image :src="item.img1"></image>
                          <view>{{ item.text }}</view>
                      </view>
                  </view>
                  <view class="after2">
                      <image :src="item.img2"></image>
                      <view class="after2-content">
                          <view>{{ item.name }}</view>
                          <view>{{ item.text2 }}</view>
                          <view>￥{{ item.price }}<view style="color: #999999;">×1</view>
                          </view>
                      </view>
                  </view>
                  <view class="after3">
                      <view>{{ item.tetx3 }}</view>
                      <view>{{ item.text4 }}</view>
                  </view>
              </view>
          </view>
      </view>
  </view>
</template>
<script>
export default {
  data() {
      return {
          after: [
              {
                  title: '订单编号：983719387471',
                  img1: '/static/退款.png',
                  text: '退款',
                  img2: '/static/image8.png',
                  name: '男运动鞋秋季青少年正品透...',
                  text2: '标准白、42',
                  price: '890.00',
                  tetx3: '商家审核中',
                  text4: '退款金额：￥890.00',
                  url:'/pages/refundorder/refunxq'
              },
              {
                  title: '订单编号：983719387471',
                  img1: '/static/退款.png',
                  text: '退货',
                  img2: '/static/image8.png',
                  name: '男运动鞋秋季青少年正品透...',
                  text2: '标准白、42',
                  price: '890.00',
                  tetx3: '商家审核中',
                  text4: '退款金额：￥890.00',
                  url:'/pages/refundorder/xiangq'     
              }
          ]
      }
  },
  methods:{
    click(url){
      uni.navigateTo({
        url:url
      })
    }
  }
}
</script>
<style lang="scss">
page {
  background-color: #F5F5F5;
}

#after {
  width: 90%;
  margin: auto;

  .after {
      .after-content {
          margin-bottom: 30rpx;
          background-color: #fff;
          border-radius: 30rpx;

          .bag {
              width: 94%;
              margin: auto;
              padding-bottom: 16rpx;

              .after1 {
                  display: flex;
                  justify-content: space-between;
                  padding-top: 20rpx;
                  padding: 20rpx 0px;
                  .after1-top {
                      font-size: 14px;
                      color: #9E9E9E;
                  }

                  .after1-top1 {
                      width: 18%;
                      display: flex;

                      image {
                          width: 44%;
                          height: 40rpx;
                      }

                      view {
                          font-size: 14px;
                          color: #A6A6A6;
                      }
                  }
              }

              .after2 {
                  display: flex;
                  justify-content: space-between;

                  image {
                      width: 40%;
                      height: 200rpx;
                  }

                  .after2-content {
                      width: 59%;
                  }

                  .after2-content view:nth-child(1) {
                      font-size: 14px;
                      padding: 10rpx 0px;
                  }

                  .after2-content view:nth-child(2) {
                      font-size: 14px;
                      padding: 14rpx 0px;
                      color: #999999;
                  }

                  .after2-content view:nth-child(3) {
                      display: flex;
                      font-size: 18px;
                      padding: 10rpx 0px;
                  }
              }

              .after3 {
                  background-color: #F5F5F5;
                  width: 100%;
                  height: 70rpx;
                  line-height: 70rpx;
                  border-radius: 10rpx;
                  display: flex;
              }

              .after3 view:nth-child(1) {
                  width: 28%;
                  text-align: center;
                  font-weight: bold;
                  font-size: 14px;
              }

              .after3 view:nth-child(2) {
                  font-size: 14px;
                  color: #676767;
              }
          }

      }
  }
}
</style>